<template>
  <a-modal
    v-model="visible"
    title="分配客户"
    @ok="handleOk"
    :confirm-loading="confirmLoading"
    @cancel="$emit('update:visible', false)"
    class="distribution"
  >
    <div class="tit">
      您选择了 <span>{{ distributionVal.length }}</span> 客户，请选择客户接收人
    </div>
    <a-form :form="form">
      <a-form-item label="赏金金额" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
        <a-select placeholder="请选择" v-decorator="['memberId', { rules: [{ required: true, message: '接受人不能为空' }] }]">
          <a-select-option :value="item.id" v-for="item in tableData" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
// import moment from "moment";
import { getCrmMembers, postBatchDistribution } from "./api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    distributionVal: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      tableData: []
    };
  },
  created() {
    this.onGetCrmMembers();
  },
  methods: {
    async onGetCrmMembers() {
      try {
        const { data } = await getCrmMembers({
          // jurisdiction: 2
          // userId: this.$store.state.auth.userInfo.id
        });
        this.tableData = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.tableData.map(item => {
            if (item.id === values.memberId) {
              values.memberName = item.name;
            }
          });
          this.onPostBatchDistribution(values);
        }
      });
    },
    async onPostBatchDistribution(v) {
      try {
        await postBatchDistribution({
          id: 999999,
          // isPublic: this.$route.path !== "/clientele/myClientele",
          isPublic: false,
          customerIds: this.distributionVal,
          memberId: v.memberId,
          memberName: v.memberName
        });
        this.$notification.success({ message: "操作成功" });
        this.$emit("update:visible", false);
        this.$emit("upDate");
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.distribution {
  .tit {
    font-size: 14px;
    margin-bottom: 16px;
    span {
      color: #6a66f6;
    }
  }
  ::v-deep .ant-modal-body {
    padding-bottom: 8px;
  }
}
</style>
